<template>
  <div class="vallet-content-box">
     <div class="vallet-box">
        <div class="vallet-return">
            <i @click="Walletreturn()" class=" walleticon iconfont icon-jiantou"></i>
            <span>贡献值</span>
        </div>
        <div class="walleticon-ww">
            ￥{{balance}}
        </div>
     </div>
      <div class="walleticon-detail">
          贡献值明细
      </div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="wallet-detail-box" v-if="tbUserWalletDetailList.length>0">
            <div class="wallet-detail" v-for="val in tbUserWalletDetailList">
                 <!-- <p class="wallet-active" v-if="val.payType == 0">- {{val.cashBalance}}</p> -->
                 <p class="wallet-active">
                     <span v-if="val.type == '1'" style="color:#01C29C;">+{{val.contributionValue}}</span>
                     <span v-if="val.type == '0'" style="color:#FF2E67;">-{{val.contributionValue}}</span>
                 </p>
                 <div class="wallet-yinhang">{{val.valueFrom}} <span>{{val.createTime}}</span></div>
             </div>
        </div>
        <noData v-else></noData>
      </van-list>
  </div>
</template>

<script>
    import {
        List
    } from 'vant';
    import noData from "../public/noData"
    export default {
        name: "contributionDetails",
        data(){
           return{
                userId:"",
                tbUserWalletDetailList:[],
                balance:"",
                loading: false,
                finished: false,
                num: 0,
                total: 0,
           }
        },
        components:{
            noData,
            [List.name]: List,
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
        },
        methods:{
            initData(){
                // this.$http.post(this.utils.config+"/netmall/app/person/api/getUserWallet?user_id="+this.userId).then((data) => {
                //     var initList = data.data.result;
                //     this.balance = initList.walletData.balance;
                // })
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getLoginUserAllTasks?user_id=" + this.userId).then((data) => {
                    if (data.data.success) {
                        this.balance = data.data.result.tb_user_contribution.contributionValue;
                    }
                })
            },
            Walletreturn(){
                this.$router.go(-1);
            },
            Alipay(){
                this.$router.push("/plipay");
            },
            onLoad() {
                var that = this;
                that.num++;
                this.loading = false;
                that.$http.post(this.utils.config + "/netmall/app/person/api/getUserContributionDetails?pageNo=" + that.num + "&pageSize=10&userId=" + this.userId).then((data) => {
                    this.total = data.data.result.total;
                    for(let i=0;i<data.data.result.records.length;i++){
                        that.tbUserWalletDetailList.push(data.data.result.records[i]);
                        this.loading = false;
                    }
                    if (that.total == data.data.result.total.length) {
                        that.finished = true;
                    }
                })
            },
        }
    }

</script>

<style scoped>
    @import "../../assets/font/iconfont.css";
    .vallet-content-box{
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .vallet-box{
        width:100%;
        height:160px;
        padding: 0 14px;
        overflow: hidden;
        background:linear-gradient(180deg,rgba(255,90,160,1) 0%,rgba(255,46,103,1) 100%);
        margin: auto;
    }
    .vallet-return{
        margin-top: 12px;
        font-size:16px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:22px;
        text-align: center;
        position: relative;
        width: 100%;
    }
    .walleticon{
        font-size: 18px;
        position: absolute;
        left: 0;
    }
    .walleticon-ww{
        margin-top: 34px;
        text-align: center;
        font-size:30px;
        font-family:DIN-Medium,DIN;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:36px;
    }
    .cashsave{
        margin-top: 20px;
        margin-left: calc(50% - 100px);
        width:200px;
        height:44px;
        background:rgba(255,237,231,1);
        box-shadow:0px 0px 10px 0px rgba(184,87,52,0.44);
        border-radius:22px;
        text-align: center;
        line-height: 44px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,46,103,1);
    }
    .cashsave img{
        display: inline-block;
        margin-top: 13px;
        width: 21px;
        height: 21px;
    }
    .wallet-detail-box{
        padding: 0 14px;
    }
    .walleticon-detail{
        height: 55px;
        padding: 23px 14px 0 14px;
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:22px;
    }
    .wallet-detail{
        width: 100%;
        height:76px;
        background:rgba(216,216,216,0);
        overflow: hidden;
        border-bottom: 1px solid rgba(0,0,0,0.1);;
    }
    .wallet-active{
        margin:19px auto auto 1px ;
        font-size:16px;
        font-family:Roboto-Regular,Roboto;
        font-weight:400;
        color:rgba(255,46,103,1);
        line-height:19px;
    }
    .wallet-yinhang{
        margin-top: 6px;
        height:17px;
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:17px;
    }
    .wallet-yinhang span{
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:17px;
        display: inline-block;
        float: right;
    }
    .wallet-active-slect{
        margin:19px auto auto 1px ;
        font-size:16px;
        font-family:Roboto-Regular,Roboto;
        font-weight:400;
        color:#01C29C;
        line-height:19px;
    }


</style>
